<template>
  <div id="city">
      <city-header></city-header>
      <city-search :cities="cities"></city-search>
      <clist :cities="cities" :hotCities="hotCities"></clist>
      <cfilter :cities="cities"></cfilter>
  </div>
</template>

<script>
import CityHeader from './components/CityHeader'
import CitySearch from './components/CitySearch'
import Clist from './components/Clist'
import Cfilter from './components/Cfilter'
import axios from 'axios'

export default {
  name: 'City',
  data() {
  	return {
      cities: {},
      hotCities: []
  	};
  },
  components: {
    CityHeader,
    CitySearch,
    Clist,
    Cfilter
  },
  mounted() {
    this.getCityInfo()
  },
  methods: {
    getCityInfo() {
      axios.get('api/city.json')
        .then(this.getCityInfoSucc)
    },
    getCityInfoSucc(res) {
      const resdata = res.data
      if (resdata.ret && resdata.data) {
        const datas = resdata.data
        this.cities = datas.cities
        this.hotCities = datas.hotCities
      }
    }
  }
};
</script>

<style>
</style>
